<template>
 <div class="rating_page">
      <head-top head-title="选择发票抬头" :go-back="true"></head-top>
   <section class="choose_invoice">
     <span>不需要开发票</span>
     <svg @click.stop="chooseInvoice" :class="{choosed: invoice}">
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
     </svg>
   </section>
   <section class="taitou">
     <yd-cell-group>
       <yd-cell-item>
         <span slot="left">内容：</span>
         <yd-input slot="right" v-model="taitou" ref="fapiao" placeholder="发票抬头"></yd-input>
       </yd-cell-item>
     </yd-cell-group>
   </section>
   <yd-button-group>
     <yd-button size="large" @click.native="confirm">确定</yd-button>
   </yd-button-group>
 </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
import headTop from 'components/header/head'
  export default {
  data(){
     return{
       invoice:false,
       taitou:''
     }
   },
   created(){
   },
   mounted(){
   },
   computed: {
   },
   methods: {
     ...mapMutations([
       'CONFIRM_INVOICE'
    ]),
     //是否选择发票
     chooseInvoice(){
       this.invoice = !this.invoice;
     },
     confirm(){
       if( this.invoice){
         this.CONFIRM_INVOICE(this.invoice);
         this.$router.go(-1);
       }else{
         if(this.taitou){
           this.CONFIRM_INVOICE(this.taitou);
           this.$router.go(-1);
         }else{
           this.$dialog.alert({mes:'请填写发票信息！'})
         }
         }
     }
   },
   components:{
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../../style/mixin';
.choose_invoice{
  @include fj;
  align-items: center;
  background-color: #fff;
  line-height: 2.5rem;
  margin-top: 0.5rem;
  padding: 0 .7rem;
  span{
    @include sc(.75rem, #333);
  }
  svg{
    @include wh(.8rem, .8rem);
    fill: #999;
  }
  .choosed{
    fill: #4cd964;
  }
}
.taitou{
  border-top: 1px dashed $lineColor;
}
.determine{
  background-color: #4cd964;
  @include sc(.7rem, #fff);
  text-align: center;
  margin: 0 .7rem;
  line-height: 1.8rem;
  border-radius: 0.2rem;
  margin-top: 0.5rem;
}
</style>
